<template>
  <div>
    <avue-form
      ref="form" v-bind="$attrs" :option="option"
      @submit="rowUpdate" v-model="form"
    >

      <!-- 自动生成富文本卡槽 -->
      <template v-slot:[slot.slotName]="scope" v-for="slot in editorSlots">
        <!--        <editor v-model="form[slot.name]" :min-height="192"/>-->
        <div v-html="scope.value"></div>
      </template>

      <!-- 原始 slot -->
      <template #[slotName]="scope" v-for="(slot, slotName) in $scopedSlots">
        <slot :name="slotName" v-bind:scope="scope"/>
      </template>

    </avue-form>
  </div>
</template>

<script>
import {exp, get, post} from "@/api";
import {getDictDatas} from "@/utils/dict";
import {getAccessToken} from "@/utils/auth";
import Editor from "@/components/Editor/index.vue";
import WangEditor from "@/components/wangeditor/index.vue";

export default {
  name: "EpmForm",
  components: {
    Editor, WangEditor
  },
  props: {
    /**
     * 提交地址
     */
    submitUrl: {
      type: String,
      default: "/",
    },

    /**
     * 额外的更新参数
     */
    extUpdateParams: {
      type: Object,
      default: () => {
        return {};
      },
    },


    /**
     * 表单数据
     */
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },

    /**
     * 更新前的钩子
     */
    beforeUpdate: {
      type: Function,
      default: () => {
        return {};
      },
    },

    /**
     * 更新后的钩子
     */
    afterUpdate: {
      type: Function,
      default: () => {
        return {};
      },
    },

  },
  data() {
    return {
      /**
       * 列配置
       */
      column: [],

      /**
       * 自动富文本编辑器
       */
      editorSlots: [],

      /**
       * 表单数据
       */
      form: {},
    };
  },

  watch: {
    formData: {
      handler: function (val, oldVal) {
        this.form = val
      },
      deep: true
    }
  },

  computed: {
    /**
     * 组装参数
     */
    option() {
      // 默认参数
      const defaultOption = {}
      // 合并参数
      return Object.assign({}, defaultOption, this.$attrs.option, {column: this.column})
    },

  },

  mounted() {
    // 初始化列数据
    this.initColumn()
  },

  methods: {

    /**
     * 修改数据
     * @param form
     * @param done
     */
    rowUpdate: function (form, done) {
      const self = this;
      // 复制数据
      let formData = Object.assign({}, this.extUpdateParams, form)
      // 更新以前处理数据
      if (this.beforeUpdate) {
        this.beforeUpdate(formData);
      }

      // 更新数据
      post(this.submitUrl, formData).then(res => {
        self.$message.success("操作成功");
        done();
        if (this.afterUpdate) {
          this.afterUpdate(res);
        }
      }).catch(err => {
        done();
      })
    },

    /**
     * 初始化列
     */
    initColumn() {
      this.column = this.$attrs.option.column
      // 处理列
      this.column.forEach(item => {
        // 加载字典
        if (item.dictType && item.dictType.length > 0) {
          const dictData = getDictDatas(item.dictType)
          // 表单
          this.$set(item, 'dicData', dictData)
          // 表格 列 字典 并且没有指定卡槽
          if (!item.slot) {
            this.$set(item, 'slot', true)
          }
        }

        // 加载业务的数据  直接写 dicurl 没有 授权 token
        if (item.dictUrl && item.dictUrl.length > 0) {
          get(item.dictUrl).then(res => {
            this.$set(item, 'dicData', res.data)
          })
        }

        // 必填
        if (item.required && (!item.rules || item.rules.length === 0)) {
          this.$set(item, 'rules', [{required: true, message: '请输入' + item.label, trigger: 'blur'}])
        }

        // 上传文件
        if (item.type === 'upload') {
          // 上传地址
          if (!item.action) {
            this.$set(item, 'action', process.env.VUE_APP_BASE_API + '/admin-api/' + "infra/file/upload")
            this.$set(item, 'headers', {Authorization: 'Bearer ' + getAccessToken()})
          }
          // 响应参数结构
          if (!item.propsHttp) {
            this.$set(item, 'propsHttp', {
              name: 'name',
              url: 'data',
            })
          }
        }

        // 富文本
        if (item.type === 'editor') {
          // 自定义卡槽
          this.editorSlots.push({
            name: item.prop,
            slotName: item.prop + 'Form'
          })
          this.$set(item, 'formslot', true)
          // 宽度
          this.$set(item, 'span', item.span || 24)
          // 默认值
          this.$set(item, 'value', item.value || '')
        }
      });
    }
  },
};
/**
 * Form
 * 参数  说明  类型  可选值  默认值
 * value/v-model  绑定值  object  -  -
 * option  表单配置项参考Option配置  object  -  -
 * upload-before  upload组件上传前的回调,done用于继续图片上传，loading用于中断操作  function  -  (file,done,loading)=>{}
 * upload-after  upload组件上传后的回调,done用于结束操作，loading用于中断操作  function  -  (res,done)=>{}
 * upload-delete  upload组件删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除  function  -  (file,column)=>{}
 * upload-preview  upload组件查看回调  function  -  (file,column,done)=>{}
 * upload-error  upload组件上传失败错误回调  function  -  (error,column)=>{}
 * upload-exceed  upload组件上传超过长度限制回调  function  -  (limit,files,fileList,column)=>{}
 * #Option
 * 参数  说明  类型  可选值  默认值
 * size  组件的尺寸  number  medium/small/mini  small
 * column  表单列配置参考Column相关配置  array  -  -
 * labelWidth  标题宽度  string  -  80
 * labelPosition  标题位置  string  left/right/top  left
 * labelSuffix  标题的后缀  string  -  :
 * enter  回车按键触发提交表单  boolean  -  false
 * group  分组表单  array  -  -
 * tabs  选项卡表单(前提要配置group)  boolean  -  false
 * menuBtn  表单操作栏是否显示  boolean  -  true
 * menuSpan  表单操作菜单栅格占据的列数  number  -  24
 * menuPosition  表单操作菜单的位置  string  left/center/right  center
 * submitBtn  提交按钮  boolean  -  true
 * submitText  提交按钮文案  string  -  提交
 * emptyBtn  清空按钮  boolean  -  true
 * emptyText  提交按钮文案  string  -  清空
 * #Column-共用属性
 * 参数  说明  类型  可选值  默认值
 * label  标签文本的内容  string  —  —
 * prop  标签文本的内容属性名称  string  —  -
 * control  字段控制器  function  —  -
 * bind  深结构数据绑定值  string  —  -
 * rules  验证规则  object  —  -
 * value  初始化默认值  -  -  -
 * disabled  禁用  boolean  —  false
 * order  位置排序，数字越大位置越靠前  number  —  -
 * size  组件的尺寸  number  medium/small/mini  small
 * span  栅格占据的列数  number  -  12
 * gutter  栅格间隔  number  -  0
 * offset  栅格左侧的间隔格数  number  -  0
 * push  栅格向右移动格数  number  -  0
 * pull  栅格向左移动格数  number  -  0
 * row  栅格后面的内容是否从新的一行开始展示  boolean  -  false
 * display  栅格显示  boolean  -  true
 * labelWidth  标题宽度  string  -  80
 * labelPosition  标题位置  string  left/right/top  left
 * tip  内容提示辅助语  string  -  -
 * tipPlacement  内容提示辅助语位置  string  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end  top
 * labelTip  标题提示辅助语  string  -  -
 * labelTipPlacement  标题提示辅助语位置  string  top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end  top
 * #Column-字典属性
 * 参数  说明  类型  可选值  默认值
 * props  数据字典属性的配置对象，具体参考Props参考配置  object  —  —
 * dicData  数据字典值  array  —  —
 * dicUrl  数据字典接口url地址  string  —  —
 * dicQuery  数据字典接口url携带请求参数  object  —  —
 * dicHeaders  数据字典接口url携带头部参数  object  —  —
 * dicFormatter  数据字典接口url返回数据格式化方法  function  —  (res)=>{return res}
 * dicMethod  数据字典接口请求方式  string  —  —
 * #Column-Props
 * 参数  说明  类型  可选值  默认值
 * label  选项标签为选项对象的某个属性值  string  —  label
 * value  选项的值为选项对象的某个属性值  string  —  value
 * children  选项的子选项为选项对象的某个属性值  string  —  children
 * disabled  选项的禁用为选项对象的某个属性值  string  —  disabled
 * res  选项返回结构的层级(例如data.data)  string  —  -
 * #Column-Input
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * maxlength  原生属性，最大输入长度  number  -  -
 * minlength  原生属性，最小输入长度  number  -  -
 * prefixIcon  输入框头部图标  string  -  -
 * suffixIcon  输入框尾部图标  number  -  -
 * showPassword  是否显示切换密码图标  boolean  -  true
 * rows  输入框行数，只对 type="textarea" 有效  number  -  2
 * minRows  输入框行最小行数，只对 type="textarea" 有效  number  -  2
 * maxRows  输入框行最大行数，只对 type="textarea" 有效  number  -  6
 * #Column-Number
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * precision  精度  number  -  2
 * min  设置计数器允许的最小值  number  -  -Infinity
 * max  设置计数器允许的最大值  number  -  Infinity
 * step  计数器步长  number  -  1
 * controls  是否使用控制按钮  boolean  true/false  true
 * controlsPosition  控制按钮位置  string  right/top  top
 * #Column-Select
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * cascader  级联的子节点prop  array  -  -
 * cascaderIndex  级联的默认选项序号  number  -  -
 * multiple  多选  boolean  true/false  false
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * allowCreate  是否允许用户创建新条目，需配合 filterable 使用  boolean  true/false  false
 * filterable  是否可搜索  boolean  true/false  false
 * remote  是否为远程搜索  boolean  true/false  false
 * defaultFirstOption  在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用  boolean  true/false  false
 * loadingText  远程加载时显示的文字  string  -  加载中
 * popperClass  下拉框的类名  string  -  -
 * popperAppendToBody  是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false  boolean  -  true
 * #Column-Cascader
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * showAllLevels  级联输入框中是否显示选中值的完整路径  boolean  true/false  true
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * separator  选项分隔符  string  -  -
 * filterable  是否可搜索选项  boolean  true/false  false
 * filterMethod  自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中  function  -  -
 * expandTrigger  次级菜单的展开方式  string  click/hover  hover
 * multiple  是否多选  boolean  true/false  false
 * checkStrictly  是否严格的遵守父子节点不互相关联  boolean  true/false  false
 * emitPath  在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置false，则只返回该节点的值  boolean  true/false  true
 * lazy  是否动态加载子节点，需与 lazyLoad 方法结合使用  boolean  true/false  false
 * lazyLoad  加载动态数据的方法，仅在 lazy 为 true 时有效 function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)  function  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Checkbox
 * 参数  说明  类型  可选值  默认值
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * all  是否启动全选  boolean  true/false  -
 * border  是否显示边框  boolean  true/false  -
 * min  可被勾选的 checkbox 的最小数量  number  -  -
 * max  可被勾选的 checkbox 的最大数量  number  -  -
 * #Column-Radio
 * 参数  说明  类型  可选值  默认值
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * border  显示边框  boolean  true/false  false
 * button  按钮组类型  boolean  true/false  false
 * #Column-Date
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * startPlaceholder  日期/时间范围开始占位符  string  -  开始
 * endPlaceholder  日期/时间范围结束占位符  string  -  结束
 * rangeSeparator  选择范围时的分隔符  string  -  -
 * valueFormat  真实值的时间格式  string  -  -
 * format  显示值时间格式  string  -  -
 * defaultTime  范围选择时选中日期所使用的当日内具体时刻  string[]  数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00  -
 * defaultValue  可选，选择器打开时默认显示的时间  Date  -  -
 * pickerOptions  当前时间日期选择器特有的选项  object  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Time
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * startPlaceholder  日期/时间范围开始占位符  string  -  开始
 * endPlaceholder  日期/时间范围结束占位符  string  -  结束
 * rangeSeparator  选择范围时的分隔符  string  -  -
 * valueFormat  真实值的时间格式  string  -  -
 * format  显示值时间格式  string  -  -
 * defaultValue  可选，选择器打开时默认显示的时间  Date  -  -
 * pickerOptions  当前时间日期选择器特有的选项  object  -  -
 * popperClass  下拉框的类名  string  -  -
 * #Column-Switch
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * len  滑块的宽度  number  -  40
 * activeIconClass  打开时所显示图标的类名，设置此项会忽略active-text  string  -  -
 * inactiveIconClass  关闭时所显示图标的类名，设置此项会忽略 inactive-text  string  -  -
 * activeColor  打开时的背景色  string  -  #409EFF
 * inactiveColor  关闭时的背景色  string  -  #C0CCDA
 * #Column-Upload
 * 参数  说明  类型  可选值  默认值
 * accept  upload时文件类型  string/array  -  -
 * fileSize  上传文件的大小限制，单位为KB,超出大小回调upload-error函数进行操作  number  -  -
 * action  必选参数，上传的地址  string  -  -
 * propsHttp  返回数据结构体propsHttp配置  object  -  -
 * data  携带的附加参数  object  -  -
 * headers  携带的头部附加参数  object  -  -
 * limit  最大允许上传个数  number  -  -
 * fileType  如果没后缀，用来指定文件类型  string  -  img/audio/video
 * fileText  按钮上传文案  string  点击上传  -
 * listType  文件列表的类型  string  text/picture/picture-card  text
 * showFileList  是否显示已上传文件列表  boolean  true/false  true
 * multiple  是否支持多选文件  boolean  true/false  false
 * canvasOption  图片水印canvasOption配置  object  -  -
 * #Column-propsHttp
 * 参数  说明  类型  可选值  默认值
 * home  图片的根路径地址，例如返回data:{url:' / xxxx.jpg',name:''},home属性为http://xxx.com/,则最终的图片显示地址为http://xxx.com/xxxx.jpg  string  -  -
 * res  返回结构体的层次，例如返回data:{url:'',name:''},则res配置为data  string  -  -
 * url  上传成功返回结构体的图片地址，例如返回data:{urlsrc:'',name:''},则url配置为urlsrc  string  -  -
 * name  上传成功返回结构体的图片名称，例如返回data:{urlsrc:'',namesrc:''},则name配置为namesrc，当listType为picture-img属性不存在  string  -  -
 * fileName  上传文件流时的名称  string  -  file
 * #Column-canvasOption
 * 参数  说明  类型  可选值  默认值
 * text  字体的文字  string  -  avuejs.com
 * fontFamily  字体类型  string  -  microsoft yahei
 * color  字体的颜色  string  -  #999
 * fontSize  字体的大小  string  -  16
 * opacity  文字的透明度  string  -  100
 * bottom  文字距离图片底部的距离  string  -  10
 * right  文字距离图片右边的距离  string  -  10
 * ratio  压缩图片比率0-1(可以是小数)  number  -  1
 * #Column-Array/Url
 * 参数  说明  类型  可选值  默认值
 * alone  单个模式  boolean  true/false  false
 * limit  最大框的个数  number  -  -
 * #Column-Img
 * 参数  说明  类型  可选值  默认值
 * alone  单个模式  boolean  true/false  false
 * limit  最大框的个数  number  -  -
 * fileType  如果没后缀，用来指定文件类型  string  -  img/audio/video
 * #Column-Dynamic
 * 参数  说明  类型  可选值  默认值
 * rowAdd  新增方法  function  -  -
 * rowDel  删除方法  function  -  -
 * type  展示类型  string  form/crud  crud
 * limit  限制当前最大行数  number  -  -
 * #Column-Tree
 * 参数  说明  类型  可选值  默认值
 * placeholder  输入框占位文本  string  -  请输入/请选择+label名称
 * clearable  是否可清空  boolean  -  true
 * readonly  是否只读  boolean  -  -
 * blur  在失去焦点时触发  function  -  ({column,value})=>{}
 * focus  在获得焦点时触发  function  -  ({column,value})=>{}
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * multiple  多选  boolean  true/false  false
 * tags  多选时是否将选中值按文字的形式展示  boolean  true/false  false
 * checkStrictly  在显示复选框的情况下，是否严格的遵循父子不互相关联的做法  boolean  true/false  false
 * parent  是否可以选择父类  boolean  true/false  true
 * accordion  是否每次只打开一个同级树节点展开  boolean  true/false  false
 * defaultExpandAll  是否默认展开所有节点  boolean  true/false  false
 * expandOnClickNode  是否在点击节点的时候展开或者收缩节点,如果为 false，则只有点箭头图标的时候才会展开或者收缩节点  boolean  true/false  false
 * defaultExpandedKeys  默认展开的节点的 key 的数组  array  -  -
 * defaultCheckedKeys  默认勾选的节点的 key 的数组  array  -  -
 * filters  是否开启条件筛选  boolean  true/false  true
 * filterText  条件筛选提示语  string  -  请输入搜索关键字
 * iconClass  自定义树节点的图标  string  -  -
 * leafOnly  子类全选时勾选值是否包含父类  boolean  true/false  true
 * parent  父类是否可以点击和选择  boolean  true/false  true
 * lazy  是否懒加载子节点，需与 load 方法结合使用  boolean  true/false  false
 * treeLoad  加载子树数据的方法，仅当 lazy 属性为true 时生效  function  -  -
 * nodeClick  节点被点击时的回调,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。  function  -  -
 * checked  当复选框被点击的时候触发共,两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象  function  -  -
 * popperClass  下拉框的类名  string  -  -
 * popperAppendToBody  是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false  boolean  -  true
 * #Column-Table
 * 参数  说明  类型  可选值  默认值
 * formatter  展示数据格式化  function  -  -
 * onLoad  首次加载数据、查询、翻页方法  function  -  -
 * #Column-Icon
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * iconList  图标数组  array  -  -
 * #Column-Map
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * params  高德地图的初始化参数  object  -  -
 * #Column-Color
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * showAlpha  是否支持透明度选择  boolean  -  true
 * colorFormat  颜色的格式  string  hsl/hsv/hex/rgb  rgb
 * popperClass  下拉框的类名  string  -  -
 * predefine  预定义颜色  array  -  -
 * #Column-Slider
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * min  最小值  number  -  0
 * max  最大值  number  -  100
 * showInput  是否显示输入框，仅在非范围选择时有效  boolean  -  false
 * showInputControls  在显示输入框的情况下，是否显示输入框的控制按钮  boolean  -  true
 * vertical  是否竖向模式  boolean  -  false
 * height  Slider 高度，竖向模式时必填  string  -  -
 * step  步长  number  -  1
 * range  是否为范围选择  boolean  true/false  false
 * showInput  是否显示输入框，仅在非范围选择时有效  boolean  true/false  false
 * showStops  是否显示间断点  boolean  true/false  false
 * showTooltip  是否显示 tooltip  boolean  true/false  true
 * formatTooltip  格式化 tooltip message  function  true/false  -
 * tooltipClass  tooltip 的自定义类名  string  -  -
 * marks  标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式  object  -  -
 * #Column-Rate
 * 参数  说明  类型  可选值  默认值
 * change  值改变的时触发  function  -  ({column,value})=>{}
 * click  点击时触发  boolean  -  ({column,value})=>{}
 * max  最大分值  number  -  5
 * allowHalf  是否允许半选  boolean  -  false
 * lowThreshold  低分和中等分数的界限值，值本身被划分在低分中  number  -  2
 * highThreshold  高分和中等分数的界限值，值本身被划分在高分中  number  -  4
 * colors  icon 的颜色。若传入数组，共有 3 个元素，为 3 个分段所对应的颜色；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的颜色  array/object  -  ['#F7BA2A', '#F7BA2A', '#F7BA2A']
 * voidColor  未选中 icon 的颜色  string  -  #C6D1DE
 * disabledVoidColor  只读时未选中 icon 的颜色  string  -  #EFF2F7
 * iconClasses  icon 的类名。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名  array/object  -  ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
 * voidIconClass  未选中 icon 的类名  string  -  el-icon-star-off
 * disabledVoidIconClass  只读时未选中 icon 的类名  string  -  el-icon-star-on
 * showText  是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容  boolean  -  false
 * showScore  是否显示当前分数，show-score 和 show-text 不能同时为真  boolean  -  false
 * textColor  辅助文字的颜色  string  -  #1F2D3D
 * texts  辅助文字数组  array  -  ['极差', '失望', '一般', '满意', '惊喜']
 * scoreTemplate  分数显示模板  boolean  -  {value}
 * #Events
 * 事件名称  说明  参数
 * submit  表单提交回调事件  form,done
 * reset-change  表单清空回调事件  -
 * #Methods
 * 事件名称  说明  参数
 * submit  对整个表单进行提交 ｜ - ｜
 * resetForm  对整个表单进行重置 ｜ - ｜
 * updateDic  更新指定字典  prop,dic
 * dicInit  重新加载全部字典  —
 * getPropRef  获取prop的ref对象  prop
 * validate  对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise  (callback: Function(boolean, object))
 * validateField  对部分表单字段进行校验的方法  Function(props: array
 * resetFields  对整个表单进行重置，将所有字段值重置为初始值并移除校验结果  —
 * clearValidate  移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果  Function(props: array
 */
</script>
